import React, { Component } from 'react'
import { connect } from 'dva';

import { Form, Input } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import { DICT } from '../enum';

import CollectionCreateForm from './FormItex'

import { UmiComponentProps, BaseComponentProps, SearchComponentProps } from '@/common/type';
import { DropDownSelectObj } from '@/components/DropDownSelect';

interface P {
  file?: any;
}

type Props = P & UmiComponentProps & SearchComponentProps & BaseComponentProps;

@connect(({ account }) => ({
  dict: account.dict || {},
  cond: account.cond || {},
}))
class Search extends Component<Props, any> {

  state = {
    visible: false,
  }
  formRef: any;

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'account/queryDict',
      payload: {
        keyList: DICT
      }
    }).then(() => {
      const { cond, form } = this.props;
      const { pageNum, pageSize, ...searchParams } = cond;
      form.setFieldsValue(searchParams);
    });
  }

  search = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'account/updateCond',
          payload: {
            ...values
          }
        });

        this.props.initCurrent()
      }
    });
  };


  saveFormRef = formRef => {
    this.formRef = formRef;
  };

  handleCancel = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'upload/init' }).then(() => {
      this.setState({ visible: false })
    })
  };

  handleCreate = (v, name) => {
    const names = Array.isArray(name) ? name.map(v => v.split('.')[0]) : []
    const { form } = this.formRef.props;
    form.validateFields((err, values) => {
      const { dispatch } = this.props;
      if (err) return;

      const ans = {
        ...values,
        names,
        urls: v,
      };

      dispatch({
        type: 'account/create',
        payload: ans
      }).then(() => {
        this.setState({ visible: false }, () => form.resetFields());
      })
    });
  };

  handleChange = (type, value) => {
    const { cond = {}, dispatch, initCurrent } = this.props;
    cond[type] = value;
   
    dispatch({
      type: 'account/updateCond',
      payload: {
        ...cond,
      }
    }).then(() => {
      initCurrent()
    })
  }

  render() {

    const { dict = {}, form } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };

    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={1} span={5}>
            <Form.Item
              label="台账类型"
              {...formItemLayout}
            >
              {getFieldDecorator('type')(
                DropDownSelectObj({ dict, type: 'fire.account.type', onChange: (v) => this.handleChange('type', +v) })
              )}
            </Form.Item>
          </SearchCol>
          <SearchCol key={2} span={5}>
            <Form.Item
              label="名称"
              {...formItemLayout}
            >
              {getFieldDecorator('name', {
                rules: [{ message: '输入名称' }],
              })(
                <Input style={{ width: '100%' }} placeholder="请输入名称" />
              )}
            </Form.Item>
          </SearchCol>
          <SearchCol key={4} span={14}>
            <SearchRow type="flex" justify="end">
              <SearchButton onClick={(e) => {
                this.setState({ options: [] })
                this.props.form.resetFields();
                this.search(e)
              }} icon="redo"> 重置</SearchButton>
            <SearchButton htmlType="submit" icon="search" style={{ 'marginLeft': '15px' }}>搜索</SearchButton>
            {
              this.props.new && <SearchButton type="primary" icon="upload" style={{ 'marginLeft': '15px' }} 
                onClick={() => this.setState({ visible: true })}
              >上传</SearchButton>
            }
            </SearchRow>
          </SearchCol>
        </SearchRow>
      <CollectionCreateForm
        wrappedComponentRef={this.saveFormRef}
        visible={this.state.visible}
        onCancel={this.handleCancel}
        onCreate={this.handleCreate}
      />
      </Form >
    );
  }
}

const SearchS = Form.create<Props>()(Search);
export default SearchS;
